<template>
  <div class="all">
    <header>
      <div class="div" @click="back">
        <img src="../../../../assets/返回.png" alt="">
        <span class="solid">返回</span>
      </div>
      <div class="div">
        <ul class="tabUl" >
          <li :class="tabIndex == 0 ? 'selectTab' : ''" @click="tabIndex = 0, getData()">修改分配</li>
          <li :class="tabIndex == 1 ? 'selectTab' : ''" @click="tabIndex = 1, getData()">查看分配</li>
        </ul>
      </div>
      <div class="div">
        <span></span>
      </div>
    </header>
    <div v-show="select_patient_type == true" class="label" style="justify-content: space-between;margin-bottom: 8px">
      <span style="display: flex;align-items: center;">
        <a  class="hengGang"></a>
        请选择归属
      </span>
      <div style="display: flex;align-items: center">
        <span class="radio"  @click="patient_type = 1, savePatient()">
          <img class="selectImg" v-if="patient_type == 1" src="../../../../assets/题目选择@2x.png" alt="">
          <img class="selectImg" v-else src="../../../../assets/蓝未选择.png" alt="">
          居家
        </span>
        <span class="radio"   @click="patient_type = 2, savePatient()">
          <img class="selectImg" v-if="patient_type == 2" src="../../../../assets/题目选择@2x.png" alt="">
          <img class="selectImg" v-else src="../../../../assets/蓝未选择.png" alt="">
          住院
        </span>
      </div>
    </div>

    <div class="label" v-show="select_patient_type == true">
      <a  class="hengGang"></a>
      选择分配
    </div>
    <van-collapse v-model="activeNames">
      <van-collapse-item
        v-for="(item, index) in groupArr"
        :key="index"
        :title="item.group_name"
        name="1"
        disabled
        class="team"
      >
        <template #value>
          <div @click="isSelect(item)" >
            <img v-if="item.jth_id"
                 class="selectImg" src="../../../../assets/方形选中.png" alt="">
            <img v-else
                 class="selectImg"
                 src="../../../../assets/方形未选中.png" alt="">
          </div>
        </template>

        <p  @click.stop="isSelect(curr)" class="pTree" v-for="(curr, currIndex) in item.members" :key="currIndex">
          <span style="display: flex;align-items: center">
            <img class="photo" src="../../../../assets/男医生@2x.png" alt=""> {{curr.NICK_NAME}}
          </span>
          <span >
              <img v-if="curr.jth_id"
                   class="selectImg" src="../../../../assets/方形选中.png" alt="">
              <img v-else
                   class="selectImg"
                   src="../../../../assets/方形未选中.png" alt="">
          </span>
        </p>

        <van-collapse v-model="activeNames">
          <van-collapse-item
            v-for="(curr, currIndex) in item.groups"
            :key="currIndex"
            :title="curr.group_name"
            name="1"
            disabled
          >
            <template #value>
              <div @click="isSelect(curr)">
<!--                  v-if="(tabIndex == 0 && curr.health_right == 1) || (tabIndex == 1 && curr.health_right !== null) "-->
                <img  v-if="curr.jth_id"
                     class="selectImg" src="../../../../assets/方形选中.png" alt="">
                <img v-else
                     class="selectImg"
                     src="../../../../assets/方形未选中.png" alt="">
              </div>
            </template>

            <p  @click.stop="isSelect(childen)" class="pTree" v-for="(childen, childenIndex) in curr.members" :key="childenIndex">
              <span style="display: flex;align-items: center">
                <img class="photo" src="../../../../assets/男医生@2x.png" alt="">  {{childen.NICK_NAME}}
              </span>
              <span>
                 <img  v-if="childen.jth_id"
                      class="selectImg" src="../../../../assets/方形选中.png" alt="">
                <img v-else
                     class="selectImg"
                     src="../../../../assets/方形未选中.png" alt="">
              </span>
            </p>

          </van-collapse-item>
        </van-collapse>

      </van-collapse-item>
    </van-collapse>

    <van-dialog v-model="fenpeiShow"
                width="80%"
                confirm-button-color="#1da4f2"
                :title="`确认将档案分配给`+selectName+ tabText +`吗？`"
                @confirm="Confirm()"
                show-cancel-button>
    </van-dialog>
    <van-dialog v-model="cancelShow"
                width="80%"
                confirm-button-color="#1da4f2"
                :title="`确认取消`+selectName+ tabText +`吗？`"
                @confirm="cancelConfirm()"
                show-cancel-button>
    </van-dialog>
  </div>
</template>

<script>
import TeamMembers from '../Member/TeamMembers'
export default {
  name: 'PeopleFenpei',
  components: {TeamMembers},
  data () {
    return {
      data_user_id: this.$route.query.data_user_id,
      team_id: this.$route.query.team_id,
      groupArr: [],
      activeNames: ['1'],
      tabIndex: 0,
      selectName: '',
      fenpeiShow: false,
      cancelShow: false,
      ITEM: [],
      patient_type: '',
      isHavepatient_type: true,
      select_patient_type: true
    }
  },
  mounted () {
    if (this.$route.query.patient_type) {
      this.select_patient_type = false
    }
    this.getData()
  },
  computed: {
    tabText () {
      return this.tabIndex == 0 ? '管理' : this.tabIndex == 1 ? '查看' : ''
    }
  },
  methods: {
    savePatient () {
      this.$http.miniTeamPatientSave({
        team_id: this.team_id,
        patient_user_id: this.data_user_id,
        patient_type: this.patient_type
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    isSelect (item) {
      console.log(item)
      if (item.group_name) {
        this.selectName = item.group_name
      } else if (item.NICK_NAME) {
        this.selectName = item.NICK_NAME
      }
      this.ITEM = item
      if (item.jth_id) {
        // this.cancelShow = true
        this.cancelConfirm()
      } else {
        // this.fenpeiShow = true
        this.Confirm()
      }
      // if (this.tabIndex == 0) {
      //   if (item.health_right == 0 || item.health_right == null) {
      //     this.fenpeiShow = true
      //   } else if (item.health_right == 1) {
      //     this.cancelShow = true
      //   }
      //
      // } else if (this.tabIndex == 1) {
      //   if (item.health_right == null) {
      //     this.fenpeiShow = true
      //   } else {
      //     this.cancelShow = true
      //   }
      // }
    },
    // 取消
    cancelConfirm () {
      let group_id = ''
      let doc_user_id = ''
      let health_right = ''
      if (this.ITEM.group_id) {
        group_id = this.ITEM.group_id
      } else {
        group_id = this.ITEM.id
      }
      if (this.ITEM.doc_user_id) {
        doc_user_id = this.ITEM.doc_user_id
      } else {
        doc_user_id = ''
      }
      if (this.tabIndex == 0) {
        health_right = 1
      } else if (this.tabIndex == 1) {
        health_right = 0
      }
      this.$http.delTeamHealth({jth_id: this.ITEM.jth_id, health_right: health_right})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.getData()
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 选中
    Confirm () {
      let group_id = ''
      let doc_user_id = ''
      let health_right = ''
      if (this.ITEM.group_id) {
        group_id = this.ITEM.group_id
      } else {
        group_id = this.ITEM.id
      }
      if (this.ITEM.doc_user_id) {
        doc_user_id = this.ITEM.doc_user_id
      } else {
        doc_user_id = ''
      }
      if (this.tabIndex == 0) {
        health_right = 1
      } else if (this.tabIndex == 1) {
        health_right = 0
      }
      this.$http.saveTeamHealth({
        team_id: this.team_id,
        data_user_id: this.data_user_id,
        group_id: group_id,
        doc_user_id: doc_user_id,
        health_right: health_right
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.getData()
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    },
    // 返回
    back () {
      this.$router.history.go(-1)
    },
    // 获取团队每级小组及成员
    getData () {
      let health_right = 0
      if (this.tabIndex == 0) {
        health_right = 1
      } else if (this.tabIndex == 1) {
        health_right = 0
      }
      this.$http.treeGroup({data_user_id: this.data_user_id, team_id: this.team_id, health_right: health_right})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.groupArr = res.data.data
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    }
  }
}
</script>

<style scoped>
.all{
  width: 100%;
  height: 100%;
  background: #FAF9FE;
  overflow: auto;
  font-size: 15px;
  font-family: PingFang SC;
}
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E5E5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 9;
}
.div{
  /*width: 33%;*/
  height: 100%;
  display: flex;
  align-items: center;
  font-family: "PingFang SC";
  font-size: 15px;
  font-weight: bold;
}
.div img{
  margin-right: 5px;
}
.div:nth-child(1) img{
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img{
  margin-right: 5px;
  width: 13px;
  height: 13px;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.div:nth-child(2){
  width: 70%;
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.solid{
  color: #1DA4F2;
}
/deep/ .van-cell__title, .van-cell__value{
  font-weight: bold;
}
/deep/ .van-collapse-item__content{
  color: #333333;
}
/deep/ .van-collapse-item__title--disabled, .van-collapse-item__title--disabled .van-cell__right-icon{
  color: #333333;
}
.updateBtn{
  /*width: 60px;*/
  /*height: 29px;*/
  padding: 3px 5px;
  box-sizing: border-box;
  background: #FFFFFF;
  border: 1px solid #1DA4F2;
  border-radius: 5px;
  color: #1da4f2;
  font-weight: bold;
}
.pTree{
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #E5E5E5;
  /*padding: 0 16px;*/
  padding-left: 16px;
  box-sizing: border-box;
}
/deep/ .van-collapse-item__content{
  padding: 0 16px;
  box-sizing: border-box;
}
/deep/ .van-cell {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  padding: 0px 16px;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  height: 44px;
  line-height: 24px;
  align-items: center;
  background-color: #fff;
}
.selectImg{
  width: 16px;
  height: 16px;
}
.tabUl{
  width: 90%;
  color: #1da4f2;
  display: flex;
}
.tabUl li{
  border: 1px solid #1da4f2;
  flex: 1;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: -1px;
}

.tabUl li:first-child{
  border-radius: 5px 0 0 5px;
}
.tabUl li:last-child{
  border-radius: 0 5px 5px 0;
}
.selectTab{
  background: #1da4f2!important;
  color: #FFFFFF!important;
}
.photo{
  width: 30px;
  height: 30px;
}
.pTree{
  padding-right: 5px;
}
/deep/ .van-icon-arrow::before{
  content: '';
}
/deep/ .van-cell{
  padding: 0 10px 0 16px;
}
/deep/ .van-collapse-item__content{
  padding: 0 10px 0 16px;
}
.label{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  box-sizing: border-box;
  background: #FFFFFF;
  font-weight: bold;
}
.hengGang{
  width: 2px;
  height: 15px;
  background: #1da4f2;
  border-radius: 2px;
  display: flex;
  margin-right: 5px;
}
.selectImg{
  width: 16px;
  height: 16px;
}
.radio{
  display: flex;
  align-items: center;
  margin-right: 15px;
}
.radio img{
  margin-right: 5px;
}
</style>
